<template>
  <div class="dashboard-container">
    <!-- 第一行：今日数据 + 消息通知 -->
    <div class="row first-row">
      <!-- 今日数据卡片组 -->
      <div class="data-cards">
        <div class="section-title">今日数据</div>
        <div class="cards-grid">
          <div class="data-card">
            <div class="card-title">订单(笔)</div>
            <div class="card-value" v-if="todayData.toDayOrder">{{
              todayData.toDayOrder.today
            }}</div>
            <div class="card-compare" v-if="todayData.toDayOrder">
              昨日：{{ todayData.toDayOrder.yesterday }}
              <i
                v-if="todayData.toDayOrder.direction == 1"
                class="el-icon-top"
                style="font-size: 30px; color: #67c23a"
              ></i>
              <i
                v-if="todayData.toDayOrder.direction == 0"
                class="el-icon-bottom"
                style="font-size: 30px; color: #f56c6c"
              ></i>
            </div>
          </div>
          <div class="data-card">
            <div class="card-title">金额(元)</div>
            <div class="card-value" v-if="todayData.toDayOrderAmount">{{
              todayData.toDayOrderAmount.today
            }}</div>
            <div class="card-compare" v-if="todayData.toDayOrderAmount">
              昨日：{{ todayData.toDayOrderAmount.yesterday }}
              <i
                v-if="todayData.toDayOrderAmount.direction == 1"
                class="el-icon-top"
                style="font-size: 30px; color: #67c23a"
              ></i>
              <i
                v-if="todayData.toDayOrderAmount.direction == 0"
                class="el-icon-bottom"
                style="font-size: 30px; color: #f56c6c"
              ></i>
            </div>
          </div>
          <div class="data-card">
            <div class="card-title">未支付(笔)</div>
            <div class="card-value" v-if="todayData.unpaidOrder">{{
              todayData.unpaidOrder.today
            }}</div>
            <div class="card-compare" v-if="todayData.unpaidOrder">
              昨日：{{ todayData.unpaidOrder.yesterday }}
              <i
                v-if="todayData.unpaidOrder.direction == 1"
                class="el-icon-top"
                style="font-size: 30px; color: #67c23a"
              ></i>
              <i
                v-if="todayData.unpaidOrder.direction == 0"
                class="el-icon-bottom"
                style="font-size: 30px; color: #f56c6c"
              ></i>
            </div>
          </div>
          <div class="data-card">
            <div class="card-title">新增客户(人)</div>
            <div class="card-value" v-if="todayData.newCustomer">{{
              todayData.newCustomer.today
            }}</div>
            <div class="card-compare" v-if="todayData.newCustomer">
              昨日：{{ todayData.newCustomer.yesterday }}
              <i
                v-if="todayData.unpaidOrder.direction == 1"
                class="el-icon-top"
                style="font-size: 30px; color: #67c23a"
              ></i>
              <i
                v-if="todayData.unpaidOrder.direction == 0"
                class="el-icon-bottom"
                style="font-size: 30px; color: #f56c6c"
              ></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 消息通知 -->
      <div class="notice-section">
        <div class="section-title">消息通知</div>
        <div class="notice-list">
          <div
            class="notice-item"
            v-for="(notice, index) in msgList"
            :key="index"
          >
            <span class="notice-icon">【消息】</span>
            <span class="notice-text">{{ notice.title }}</span>
            <span class="notice-time">{{ formatDateTime(notice.createDate) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行：订单趋势-->
    <div class="row second-row">
      <!-- 订单趋势图表 -->
      <div class="chart-section order-trend">
        <div class="section-header">
          <div class="section-title">订单趋势</div>
        </div>
        <!-- class="chart-container" -->
        <div id="ordersChart" style="height: 300px"></div>
      </div>
    </div>

    <!-- 第三行：订单趋势-->
    <div class="row second-row" style="margin-top: 20px">
      <!-- 订单趋势图表 -->
      <div class="chart-section order-trend">
        <div class="section-header">
          <div class="section-title">销售统计</div>
        </div>

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" width="100" label="序号">
          </el-table-column>
          <el-table-column prop="productCode" label="产品编号" width="180">
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" width="180">
          </el-table-column>
          <el-table-column prop="orderCount" label="订单数"> </el-table-column>
          <el-table-column prop="saleAmount" label="销售额"> </el-table-column>
          <el-table-column prop="saleAmountProportion" label="销售占比">
            <template slot-scope="scope">
              <p>{{ scope.row.saleAmountProportion }}%</p>
            </template>
          </el-table-column>
          <el-table-column prop="saleQty" label="销量"> </el-table-column>
          <el-table-column prop="saleQtyProportion" label="销量占比">
            <template slot-scope="scope">
              <p>{{ scope.row.saleQtyProportion }}%</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  QueryTodayDataAnalysisByCondition,
  QueryMessageByCondition,
  QueryOrderSaleAnalysisByCondition,
  QueryProductSaleAnalysisByCondition
} from '@/api/home';
export default {
  data() {
    return {
      tableData: [],
      todayData: {},
      msgList: [],
      orderChart: {
        chartDom: null,
        myChart: null,
        option: {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['按订单金额', '按订单销量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '按订单金额',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '按订单销量',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            }
          ]
        }
      },
      notices: []
    };
  },
  mounted() {
    this.getDayData();
    this.getMsgList();
    this.getProductList();
    this.getOrderChart();
    this.orderChart.chartDom = document.getElementById('ordersChart');
    this.orderChart.myChart = echarts.init(this.orderChart.chartDom);
    this.orderChart.option &&
      this.orderChart.myChart.setOption(this.orderChart.option);
  },
  methods: {
    formatDateTime(isoString) {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需+1
      const day = date.getDate();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getProductList() {
      QueryProductSaleAnalysisByCondition({})
        .then((res) => {
          this.tableData = res;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getMsgList() {
      QueryMessageByCondition({})
        .then((res) => {
          this.msgList = res;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getDayData() {
      QueryTodayDataAnalysisByCondition({})
        .then((res) => {
          this.todayData = res;
          console.log('res>>>>>>>>>', res);
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getOrderChart() {
      QueryOrderSaleAnalysisByCondition()
        .then((res) => {
          console.log('charts>>>>>>>>>', res);
          let arr = [];
          res.orderAmounts.forEach((item, index) => {
            arr.push(item.Key)
          })
          console.log('arr>>>>>>>>>', arr);
          this.orderChart.option.xAxis.data = arr;
          this.orderChart.myChart.setOption(this.orderChart.option,true)
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  },
  beforeDestroy() {
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background: #f5f6fa;
}

/* 通用样式 */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

/* 第一行布局 */
.first-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.data-cards {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.data-card {
  padding: 16px;
  background: #f8f9fe;
  border-radius: 8px;
}

.card-title {
  color: #909399;
  font-size: 13px;
  margin-bottom: 8px;
}

.card-value {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.card-compare {
  font-size: 12px;
  color: #909399;
}

.ratio {
  margin-left: 6px;
  font-weight: 500;
}

.up {
  color: #67c23a;
}
.down {
  color: #f56c6c;
}

.notice-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.notice-list {
  border-top: 1px solid #ebeef5;
}

.notice-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.notice-icon {
  color: #409eff;
  margin-right: 8px;
  font-size: 14px;
}

.notice-text {
  flex: 1;
  color: #606266;
  font-size: 14px;
}

.notice-time {
  color: #909399;
  font-size: 12px;
}

/* 第二行布局 */
.second-row {
  /* display: grid; */
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.time-tabs {
  display: flex;
  gap: 8px;
}

.time-tab {
  padding: 6px 12px;
  border-radius: 16px;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.time-tab.active {
  background: #5470c6;
  color: white;
}

.material-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.legend-item {
  padding: 4px 12px;
  border-radius: 14px;
  color: white;
  font-size: 12px;
}
</style>
